{extend name="base" /}
{block name="header_top"}
    {include file="header-top" /}
{/block}
{block name="header"}
<link rel="stylesheet" href="__STATIC__/css/vip.css">
{/block}
{block name="body"}
<div class="width-out clearfix">
    <div class="relative recharge-box border-bottom2 clearfix pr20">
        <img width="100%" alt="升级vip" src="__IMAGES__/payall.jpg" style="margin-bottom:10px;">
            <div style="background-color: #efefef; height:42px; padding: 10px 10px; margin-bottom: 10px; ">
                <h2 class="fl font18  mr10 mb20 font-yahei">
                    <span style="color: #6633FF">第1步：</span>请选择您要升级的用户级别&nbsp;
                    <span class=" f14" style="color:#ff1100">您充值完成后用户级别自动升级。</span>
                </h2>
            </div>
            <div id="J_payTip" class="absolute common-error-tip-box payment-tip">
                <span class="ico common-error-ico error-ico"></span>
                <span class="common-error-tip"></span>
            </div>
            <div class="clearB"></div>
            <ul id="J_rechargeList" class="fl recharge-list">
                {vip_list limit="4"}
                <li data-vip-id="{$vip.id}" class="relative recharge-item mb10 livip">
                    <div class="absolute ico recharge-ico" style="display: none;"></div>
                    {eq name="$key" value="0"}<div class="vip-tj seq1">【超值】即将恢复原价</div>{/eq}
                    <div class="vip-name">{$vip.title}</div>
                    <div class="vip-money"><span>￥</span>{$vip.price}<div class="yjia">{$vip.original_price}</div>
                    </div>
                    <div class="vip-intr">{$vip.content}</div>
                </li>
                {/vip_list}
            </ul>
    </div>
    <div class="pr20">
        <table width="100%" id="ptip1"><tbody><tr><td>
            <div style="background-color: #efefef; padding: 10px 10px; margin-bottom: 10px;">
                <span style="color: #6633FF">第2步：</span><b>请选择充值方式</b>
            </div>
            <div class="clearB"></div>
            <div id="J_rechargeWrap" class="relative" style="width: 330px;">
                <ul class="recharge-sort clearfix mt10 ml17 " id="J_payKindList">
                    {eq name="$site_info['pay_type_alipay']" value='1'}
                    <li data-pay-type="alipay" class="fl relative recharge-item mb7  mr10" data-value="alipay" title="使用支付宝充值">
                        <div class="bank-sort bank-alipay"></div>
                    </li>
                    {/eq}

                    {eq name="$site_info['pay_type_weixin']" value='1'}
                    <li data-pay-type="weixin" class="fl relative recharge-item mb7 mr10" data-value="weixin" title="微信支付">
                        <div class="bank-sort bank-yibao"><img src="__IMAGES__/wx_pay.png" height="35"></div>
                    </li>
                    {/eq}
                </ul>
            </div>
            <div class="clearB"></div>
            <br>

            <div id="step3">
                <div style="background-color: #efefef; padding: 10px 10px; margin-bottom: 5px;">
                    <span style="color: #6633FF">第3步：</span> <b>确认支付进入充值页面</b>
                </div>
                <input type="button" data-pay-type="" data-vip-id="0" value="确认支付" id="pay-action" class="btn_150_40" style="margin-top:15px;">
            </div>
            <div id="qrcode" style="display: none;padding: 10px"></div>
        </td>
        </tr>
            </tbody>
        </table>
    </div>
</div>
{/block}
{block name="footer"}

<script>
    $(document).ready(function() {

        $("#J_payKindList .recharge-item").on("click",function () {
             $("#pay-action").data("pay-type",$(this).data("pay-type"));
             $(this).addClass("recharge-item-on").find(".recharge-ico").show().end().siblings().removeClass("recharge-item-on").find(".recharge-ico").hide();
        });

        $("#J_rechargeList .recharge-item").on("click",function () {

            $("#pay-action").data("vip-id",$(this).data("vip-id"));
            $(this).addClass("recharge-item-on").find(".recharge-ico").show().end().siblings().removeClass("recharge-item-on").find(".recharge-ico").hide();
        });

        $("#pay-action").on("click",function () {
            var payType = $(this).data("pay-type");
            var vipId = $(this).data("vip-id");
            if (vipId == 0) {
                layer.msg("请选择开通的套餐!");
                return false;
            }

            if (payType == "") {
                layer.msg("请选择支付类型!");
                return false;
            }

            $.ajax({
                type: "POST",
                url: "/order/create",
                data: {
                    'actType' : "vip",
                    'payType' : payType,
                    'vipId' : vipId
                },
                dataType: "json",
                success: function(res) {
                    if (res.code == 200) {

                        createQrcode(res.data,"qrcode");

                        layer.open({
                            type: 1,
                            title: '扫码支付-支付后请刷新网页',
                            maxmin: false,
                            area: 'auto',
                            content: $("#qrcode"),
                            end: function(){
                                layer.msg("支付取消!");
                            }
                        });
                    }
                }
            })



        });
    });
</script>
{/block}